<template>
  <div
    class="Con"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <div class="Con-H">
      <el-select
        v-model="SelectRoom"
        placeholder="请选择课室"
        size="small"
        style="width: 15%; margin-right: 15px"
      >
        <el-option v-for="item in Rooms" :key="item" :value="item"> </el-option>
      </el-select>

      <el-input
        v-model="SelectTeacherName"
        placeholder="请输入教师姓名"
        size="small"
        style="width: 15%; margin-right: 15px"
      ></el-input>
      <el-button
        type="primary"
        icon="el-icon-search"
        size="small"
        style="margin-right: 15px"
        @click="query()"
        >搜索</el-button
      >
    </div>

    <div class="Con-C">
      <el-table :data="Get_tableData" style="width: 100%" height="100%">
        <el-table-column prop="room" label="课室" sortable> </el-table-column>

        <el-table-column prop="c_date" label="日期" sortable> </el-table-column>

        <el-table-column prop="c_time" label="使用时段"> </el-table-column>

        <el-table-column prop="tpicture" label="签名">
          <template slot-scope="scope"
            ><!--slot--->
            <img
              :src="scope.row.tpicture"
              style="
                width: 75%;
                height: 50px;
                box-shadow: 1px 1px 5px rgb(146, 146, 146);
              "
              alt="无签名"
            />
          </template>
        </el-table-column>

        <el-table-column prop="c_classroom" label="使用专业,班级">
        </el-table-column>

        <el-table-column prop="student_number" label="参加实验人数">
        </el-table-column>

        <el-table-column prop="c_teacher" label="指导老师"> </el-table-column>

        <el-table-column prop="c_name" label="实验项目或内容">
        </el-table-column>
        <el-table-column prop="xz" label="性质"> </el-table-column>

        <el-table-column prop="c_state" label="状态"> </el-table-column>

        <el-table-column prop="roomAdministratorpicture" label="管理员">
          <template slot-scope="scope"
            ><!--slot--->
            <img
              :src="scope.row.roomAdministratorpicture"
              style="
                width: 75%;
                height: 50px;
                box-shadow: 1px 1px 5px rgb(146, 146, 146);
              "
              alt="未注册"
            />
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="Con-B">
      <div class="Con-B-L">
        <el-pagination
          background
          layout="total,prev, pager, next,jumper"
          :total="total"
          :page-size="pageSize"
          :current-page.sync="pageNum"
          @current-change="changePage"
        >
        </el-pagination>
      </div>

      <div class="Con-B-R">
        <el-button type="primary" size="small" @click="exportData()"
          >导 出<i class="el-icon-upload el-icon--right"></i
        ></el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { axios1 } from "@/network";
import Qs from "qs";
import table2excel from "js-table2excel";

export default {
  data() {
    return {
      Rooms: ["", 102, 203, 301, 304, 401, 403, 404, 501, 503, 504],
      SelectRoom: "",
      SelectTeacherName: "",
      tableData: [], //请求获取的数据

      pageNum: 1,
      pageSize: 10,
      total: null,

      totalAll: null,
      tableDataAll: [], //导出全部数据

      loading: false,
    };
  },
  methods: {
    SelectAll() {
      let mydata = {
        room: this.SelectRoom,
        c_teacher: this.SelectTeacherName,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      axios1({
        url: "/excel/exportCourse",
        method: "get",
        headers: {
          token: this.$store.state.token,
        },
        params: mydata,
      })
        .then((res) => {
          this.tableData = res.data.data.data;
          this.total = res.data.data.total;
          this.totalAll = this.total;

          this.$message({
            message: "查询成功",
            type: "success",
            duration: 1000,
          });
          console.log(this.totalAll);
          // console.log(this.pageNum)
          // location.reload()
          // console.log(this.tableData)
          // console.log(this.total)
        })
        .catch((res) => {
          alert(res);
        });
    },

    SelectTotalData() {
      let mydata2 = {
        room: this.SelectRoom,
        c_teacher: this.SelectTeacherName,
        pageNum: this.pageNum,
        pageSize: this.totalAll,
      };
      (this.loading = true),
        axios1({
          url: "/excel/exportCourse",
          method: "get",
          headers: {
            token: this.$store.state.token,
          },
          params: mydata2,
        })
          .then((res) => {
            this.tableDataAll = res.data.data.data;
            // console.log(this.tableDataAll)
            for (let i = 0; i < this.tableDataAll.length; i++) {
              if (this.tableDataAll[i].c_time == "08:40:00") {
                this.tableDataAll[i].c_time = "第一，二节课";
              } else if (this.tableDataAll[i].c_time == "10:25:00") {
                this.tableDataAll[i].c_time = "第三，四节课";
              } else if (this.tableDataAll[i].c_time == "14:15:00") {
                this.tableDataAll[i].c_time = "第五，六节课";
              } else if (this.tableDataAll[i].c_time == "15:55:00") {
                this.tableDataAll[i].c_time = "第七，八节课";
              } else if (this.tableDataAll[i].c_time == "18:15:00") {
                this.tableDataAll[i].c_time = "第九，十节课";
              } else if (this.tableDataAll[i].c_time == "20:00:00") {
                this.tableDataAll[i].c_time = "第十一，十二节课";
              }

              if (this.tableDataAll[i].tpicture == "") {
                //图片为空
              }
              if (this.tableDataAll[i].c_state == 0) {
                this.tableDataAll[i].c_state = "未确认";
              } else {
                this.tableDataAll[i].c_state = "已确认";
              }
              this.tableDataAll[i].c_classroom =
                this.tableDataAll[i].c_grade +
                " " +
                this.tableDataAll[i].c_classroom;
            }
            let column = [
              {
                title: "课室",
                key: "room",
                type: "text",
              },
              {
                title: "日期",
                key: "c_date",
                type: "text",
              },
              {
                title: "使用时段",
                key: "c_time",
                type: "text",
              },
              {
                title: "签名",
                key: "tpicture",
                type: "image",
                width: 120,
                height: 80,
              },
              {
                title: "使用专业,班级",
                key: "c_classroom",
                type: "text",
              },
              {
                title: "参加实验人数",
                key: "student_number",
                type: "text",
              },
              {
                title: "指导老师",
                key: "c_teacher",
                type: "text",
              },
              {
                title: "实验项目或内容",
                key: "c_name",
                type: "text",
              },
              {
                title: "类型",
                key: "c_type",
                type: "text",
              },
              {
                title: "状态",
                key: "c_state",
                type: "text",
              },
              {
                title: "管理员",
                key: "roomAdministratorpicture",
                type: "image",
                width: 120,
                height: 80,
              },
            ];
            const excelName = "实验室教师上课签名确认表" + this.SelectRoom;
            table2excel(column, this.tableDataAll, excelName);
            this.loading = false;
          })
          .catch((res) => {
            console.log(res);
            this.loading = false;
            alert(res);
          });
    },

    changePage() {
      //分页
      this.SelectAll();
    },
    query() {
      //搜索
      this.SelectAll(this.SelectRoom, this.SelectTeacherName);
      console.log(this.SelectRoom);
      console.log(this.SelectTeacherName);
    },

    exportData() {
      //导出数据

      this.SelectTotalData(); //获取全部数据

      // table2excel(column, this.tableDataAll, excelName)
    },
  },
  computed: {
    Get_tableData() {
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].c_time == "08:40:00") {
          this.tableData[i].c_time = "第一，二节课";
        } else if (this.tableData[i].c_time == "10:25:00") {
          this.tableData[i].c_time = "第三，四节课";
        } else if (this.tableData[i].c_time == "14:15:00") {
          this.tableData[i].c_time = "第五，六节课";
        } else if (this.tableData[i].c_time == "15:55:00") {
          this.tableData[i].c_time = "第七，八节课";
        } else if (this.tableData[i].c_time == "18:15:00") {
          this.tableData[i].c_time = "第九，十节课";
        } else if (this.tableData[i].c_time == "20:00:00") {
          this.tableData[i].c_time = "第十一，十二节课";
        }

        if (this.tableData[i].tpicture == "") {
          //图片为空
          // this.tableData[i].tpicture='../assets/img/login.jpg'
        }
        if (this.tableData[i].c_state == 0) {
          this.tableData[i].c_state = "未确认";
        } else {
          this.tableData[i].c_state = "已确认";
        }
        this.tableData[i].c_classroom =
          this.tableData[i].c_grade + " " + this.tableData[i].c_classroom;
      }
      return this.tableData;
    },
  },
  created() {
    this.SelectAll();
  },
};
</script>

<style scoped>
div {
  box-sizing: border-box;
}
.Con {
  width: 98%;
  height: 98%;
  margin: auto;
  margin-top: 1%;
  box-shadow: 1px 1px 10px rgb(119, 119, 119);
}
.Con-H {
  width: 100%;
  height: 10%;
  border-bottom: 1px solid rgb(218, 215, 215);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.Con-C {
  width: 100%;
  height: 83%;
  background-color: aqua;
  overflow: auto;
}
.Con-B {
  width: 100%;
  height: 7%;
}
.Con-B-L {
  padding-top: 20px;
  float: left;
  width: 40%;
}
.Con-B-R {
  float: right;
  padding-top: 20px;
  padding-right: 2%;
}
</style>
